<!-- 面包屑组件 -->
<script setup>

import {useRoute} from "vue-router";
import {computed, onMounted} from "vue";
import {ArrowRight} from "@element-plus/icons-vue";

const route = useRoute()
// 计算属性获取当前路由 title
const currentTitle = computed(() => {
    // 如果有嵌套路由，可能需要获取最匹配的路由的 meta.title
    return route.meta.title || '默认标题'
})

const matchedRouters = computed(() => {
    return route.matched
})

onMounted(() => {
    console.log(route.matched)
})

</script>

<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <template v-for="(route, index) in matchedRouters" :key="index">
            <el-breadcrumb-item :to="route.path">{{ route.meta.title }}</el-breadcrumb-item>
        </template>
    </el-breadcrumb>
    <br/>
    <RouterView></RouterView>
</template>

<style scoped lang="scss">

</style>
